<template>
    <div>
        <div class="main-head flex-between container-fluid">
            <div class="title">
                <h1 v-text="$t('pro.public.header.FilterList')"></h1>
            </div>
        </div>
        <div class="content container-fluid">
            <div class="portlet">
                <div class="tools">
                    <a-button
                        v-show="!loading && !empty"
                        type="primary"
                        @click="createFilterList"
                        style="margin-right: 10px;"
                        v-text="$t('pro.filterList.createFilterList')"
                    >
                    </a-button>
                    <!--<a-button type="primary" @click="History" v-text="$t('pro.filterList.history')"></a-button>-->
                </div>
                <div>
                    <a-spin :spinning="loading">
                        <div v-show="!loading && empty">
                            <a-empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original">
                                <span slot="description">{{$t('pro.filterList.nullPrompt')}}</span>
                                <a-button type="primary" icon="plus" @click="toCreateFilter">{{$t('pro.filterList.createTips' )}}</a-button>
                            </a-empty>
                        </div>

                        <div v-show="!loading && !empty">
                            <a-table
                            rowKey="id"
                            :pagination="false"
                            :columns="columns"
                            :loading="loading"
                            :dataSource="data"
                            bordered
                            @change="handleTableChange"
                            :scroll="{ x: 1300 }"
                    >
                        <template slot="domains" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="directurls" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="siteAppIds" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="apps" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="deviceIfas" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="bundles" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="publishers" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="publishers" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <template slot="ips" slot-scope="text" href="javascript:;">
                            {{text? text:0}}
                        </template>
                        <a slot="action" slot-scope="text" href="javascript:;" style="display: flex;">
                            <a-button
                                    type="primary"
                                    shape="circle"
                                    icon="search"
                                    @click="handleDetail(text)"
                                    style="margin-right: 5px;"
                            />
                            <a-dropdown>
                                <a-menu slot="overlay">
                                    <a-menu-item v-for="(li,index) in downloadlist.concat(columns.slice(2,3),columns.slice(4,10))"
                                                 :key=index
                                                 @click="handleDownLoad(text,li.key)">
                                        {{li.title}}
                                    </a-menu-item>
                                </a-menu>
                                <a-button type="primary"
                                          icon="download"
                                          @click="handleDownLoad(text)"
                                          style="margin-right: 5px;"

                                >
                                    {{$t('pro.filterList.download' )}}
                                    <a-icon type="down"/>
                                </a-button>
                            </a-dropdown>
                            <a-button type="primary"
                                      shape="circle"
                                      icon="delete"
                                      @click="handleDelete(text)"/>
                        </a>
                    </a-table>

                            <a-pagination
                                style="text-align: right;margin-top:1rem;"
                                showSizeChanger
                                showQuickJumper
                                :pageSizeOptions="pageSizeOptions"
                                :pageSize="pagination.size"
                                :total="pagination.total"
                                v-model="pagination.current"
                                @showSizeChange="handleShowSizeChange"
                                @change="handlePageChange"
                        />

                         </div>
                    </a-spin>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getAllDataByPage,delFilterList} from '@/api/filter-list'
    import {getDownload} from '@/api/lists'
    import {parseTime} from '@/utils/time'
    import {download} from "@/utils/downLoad";
    export default {
        data() {
            return {
                empty: false,   //判断是否有数据
                loading: true, //页面是否加载
                pagination: {
                    size: 10,
                    current: 1,
                }, //分页器
                pageSizeOptions: [''],  //分页下拉列表
                data: [],
                downloadlist: [],
            }
        },
        mounted() {
            this.fetch()
        },
        methods: {
            toCreateFilter() {
               this.$router.push({path: '/bidder/filterlist/create'})
            },
            //改变展示页面条数的事件
            handleShowSizeChange(current, pageSize) {
                this.pagination.size = pageSize;
                this.fetch({
                    results: this.pagination.size, //分页展示的数量
                    page: this.pagination.current,  //当前页
                })
            },
            //改变页数的事件
            handlePageChange(page, pageSize) {
                this.pagination.size = pageSize
                this.pagination.current = page
                this.fetch({
                    results: this.pagination.size, //分页展示的数量
                    page: this.pagination.current,  //当前页
                })

            },
            //表格点击切换页，排序，筛选
            handleTableChange(pagination, filters, sorter) {
                const pager = {...this.pagination}
                pager.current = pagination.current
                this.pagination = pager
                this.fetch({
                    results: pagination.pageSize, //分页展示的数量
                    page: pagination.current,  //当前页
                    sortField: sorter.field,
                    sortOrder: sorter.order,
                    ...filters
                })
            },

            fetch(params = {}) {
                this.loading = true;
                let that = this;
                params.page = this.pagination.current || 1;
                params.results = this.pagination.size || 10;
                getAllDataByPage({...params})
                    .then(res => {
                        this.loading = false;
                        let data = res.data.data;
                        this.data = data.records;
                       
                        if (this.data.length === 0){
                            this.empty = true;
                        } else {
                            this.empty = false;
                            this.pagination.total = data.total; //总
                            this.pagination.current = data.current; //当前
                            this.pagination.size = data.size; //每页
                            if (this.pagination.total !== null && this.pagination.total !== 0) {
                                this.pageSizeOptions = ['10', '20', '30', '40', '50']
                            }
                            this.data = this.data.map(item => {
                                item.updatedAt = parseTime(item.updatedAt);
                                return item
                            })
                        }
                    })
                    .catch(err => {
                        if (err){
                            this.$message.error(that.$t('pro.filterList.refresh_Error'))
                        }
                    }).finally(() => {this.loading = false;})
            },

            /*History(){//点击跳转到历史
                this.$router.push({
                    path: '/bidder/filterlist/history',
                })
            },*/

            createFilterList() {//点击跳转到过滤器子页面
                this.$router.push({
                    path: '/bidder/filterlist/create',
                    params: {id: '1'}
                })
            },
            //查询列表数据
            handleDetail(params) {
                this.$router.push({
                    path: `/bidder/filterlist/view/id/` + params.id,//跳转到查询过滤器列表页面
                    query: { id: params.id,listName: params.listName}
                    //params: { id: params.id,listName: params.listName }
                })
            },
            //删除过滤器列表
            handleDelete(params) {
                let that = this
                this.$confirm({
                    title: that.$t('pro.filterList.delete_list_Title'),
                    content: that.$t('pro.filterList.delete_list_Content'),
                    okText: this.$t('pro.public.buttonYes'),
                    okType: "danger",
                    cancelText: this.$t('pro.public.buttonNo'),
                    onOk() {
                        that.loading = true
                        delFilterList(params.id)
                            .then(res => {
                                if (res.data.data){//如果删除成功
                                    that.$message.success(that.$t('pro.filterList.delete_Success'));
                                    that.fetch({
                                        results: that.pagination.pageSize, //分页展示的数量
                                        page: that.pagination.current,  //当前页
                                    })
                                }
                            })
                            .catch(err => {
                                if (err){
                                    that.$message.error(that.$t('pro.filterList.delete_Error'));
                                }
                            })
                    },
                    onCancel() {},
                });
            },
            //下载数据
            handleDownLoad(params, name) {
                const parameter = {
                    filterListId: params.id,
                    name: name
                };

                getDownload(parameter)
                    .then(res => {
                        download(res.data)
                        this.$message.success(this.$t('pro.filterList.download_Success'))
                    })
                    .catch(() => {
                        this.$message.error(this.$t('pro.filterList.download_Success'))
                    })

            },
            //只下载固定的数据

        },
        computed:{
            columns(){
                return this.$t('pro.filterList.columns')
            }
        }
    }
</script>

